<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>My news_view Page</title>
  <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
  <link rel="stylesheet" href="/css/bootstrap-icons.css" />
  <style>
    body {
      background-color: var(--light);
    }

    header {
      background-color: var(--yellow);
      margin-bottom: 1.25rem;
    }

    footer {
      margin-top: 1.25rem;
      background-color: var(--yellow);
    }

    ul {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }


    /* 三行省略 */
    .ellipsis_three_lines {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    a:link,
    a:focus,
    a:visited,
    a:hover {
      text-decoration: none;
    }

    .news_list_card {
      background-color: var(--white);
      border-radius: 4px;
    }

    .news_list_com .news_item {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      overflow: hidden;
      list-style: none;
      border: 1px solid #eaeaea;
      margin-bottom: -1px;
      background-color: #fff;
      width: 100%;
    }

    .news_list_com .news_item:hover {
      border-color: #88d3f9;
    }

    .news_list_com .img_block {
      flex: 0 0 33%;
      margin: 20px 0;
      padding: 0 1.25rem;
      overflow: hidden;
    }

    .news_list_com .img_block:hover {
      opacity: 0.8;
    }

    .news_list_com .img_block img {
      width: 100%;
    }


    .news_list_com .news_block h3 {
      font-size: 1.25rem;
    }

    .news_list_com .news_block .news_title:hover {
      /* position: relative;
      left: 0.5em; */
      padding-left: 0.5em;
      transition: 0.3s all ease-in-out;
    }

    .news_list_com .news_block {
      flex: 0 0 66%;
      margin: 20px 0;
      padding: 0 1.25rem;
    }

    @media screen and (max-width: 576px) {

      .news_list_com .img_block,
      .news_list_com .news_block {
        flex: 0 0 100%;
      }
    }

    .news_list_com .news_block .news_info {
      color: #999;
      font-size: 12px;
      margin-bottom: 10px;
      padding-top: 5px;
    }

    .news_list_com .news_block span {
      display: inline-block;
      padding-right: 30px;
      white-space: nowrap;
      max-width: 35%;
      overflow: hidden;
      text-align: center;
    }

    .news_list_com .news_block span i {
      padding-right: 1em;
    }
  </style>
  <style>
    /* 右边侧边栏样式 */
    .right_block .cate_title {
      position: relative;
      background-color: #f4f4f4;
      padding: 0.5rem 0.5rem 0.5rem 1.25rem;
    }

    .right_block .cate_title_triangle {
      position: absolute;
      left: -7.5px;
      top: -7.5px;
      width: 0;
      height: 0;
      border: 7.5px solid transparent;
      border-right: 7.5px solid #ffb300;
      -webkit-transform: rotate(45deg);
      transform: rotate(45deg);
    }

    .right_block .right_block_list .news_title {
      font-size: 14px;
      cursor: pointer;
    }

    .right_block .right_block_list .news_dec {
      line-height: 1.625rem;
      font-size: 13px;
      color: #6c7179;
    }

    .right_block .right_block_list .news_info {
      margin-top: 0.625rem;
      font-size: 13px;
      color: #6c7179;
    }

    /* 重置卡片 */
    .right_block .right_block_list .card {
      border: none;
      position: relative;
    }

    .right_block .right_block_list .card-header {
      border: none;
      background-color: #fff;
    }

    .right_block .right_block_list .card-body {
      padding-top: 0;
      padding-bottom: 0;
      border: none;
    }

    .right_block .right_block_list .bi-stop-circle {
      position: absolute;
      top: 0.625rem;
      left: 0;
      font-size: 0.5rem;
      color: #f5b53f;
      border-radius: 50%;
    }

    .right_block .right_more {
      margin: 20px auto 30px;
      width: 82px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      border: 0.5px solid #5d6d94;
      font-size: 12px;
      color: #5d6d94;
    }
  </style>

<body>
  <div id="app">
    <div class="page_news_view" id="news_view_page">
      <header>header
	  {{list}}
        <!-- header {"thread_id":1,"state":1,"type_id":0,"channel_id":1,"display":100,"user_id":1,"hits":12,"praise_len":"0",
          "title":"用线条创作的微型雕塑 令人惊叹不已","keywords":"关键字1",
          ,"url":"#","tag":"标签","img":"#","content":"测试公告内容","collect_id":"1,2","create_time":"2014-06-16T16:00:00.000Z","update_time":"2021-02-19T02:21:20.000Z"} -->
      </header>
      <main>
        <div class="wrap">
          <div class="container">
            <div class="row">
              <div class="col-12 col-lg-9">
                <div class="news_list_card" id="article_card">
                  <div class="news_list_com">
                    <ul>
                      {{each list value i}}
                      <li>
                        <div class="news_item">
                          <div class="img_block">
                            <a href="#"><img src="{{value.img}}" alt=""></a>
                          </div>
                          <div class="news_block">
                            <h3 class="news_title"><a href="#">{{value.title}}</a></h3>
                            <div class="news_info">
                              <span class="cate">
                                <i class="bi bi-card-list"></i><a href="/funny/">{{value.tag}}</a>
                              </span>
                              <span>
                                <i class="bi bi-eye"></i>{{value.hits}}浏览
                              </span>
                              <span>
                                <a href="/funny/201406/98.html#respond"><i
                                    class="bi bi-hand-thumbs-up"></i></a>{{value.praise_len}}
                              </span>
                              <span>
                                <i class="bi bi-clock"></i>
                                {{value.create_time}}
                              </span>
                            </div>
                            <div class="news_dec ellipsis_three_lines">
                              {{value.description}}
                            </div>
                          </div>
                        </div>
                      </li>
                      {{/each}}
                    </ul>
                  </div>
                </div>
              </div>
              <div class="col-lg-3 d-none d-lg-block">
                <div class="right_block_card">
                  <div class="right_block">

                    <div class="right_list">
                      <div class="right_list_item">
                        <!-- 侧边栏标题 -->
                        <div class="cate_title">
                          <div class="cate_title_triangle"></div>
                          <h5 class="mb-0">24h快讯</h5>
                        </div>
                        <!-- 侧边栏列表 -->
                        <div class="right_block_list">
                          <ul>
                            <li>
                              <div class="accordion" id="accordion0">
                                <div class="card">
                                  <div class="card-header" id="headingOne">
                                    <h2 class="mb-0">
                                      <i class="bi bi-stop-circle"></i>
                                      <div class="news_title ellipsis_two_lines" data-toggle="collapse"
                                        data-target="#collapseOne0">SEO培训案例：关键词SEO秒排的核心，集中网页主题，迅速上首页！
                                      </div>
                                    </h2>
                                  </div>
                                  <div class="card-body">
                                    <div id="collapseOne0" class="collapse" data-parent="#accordion_10">
                                      <div class="news_dec news_title ellipsis_two_lines">
                                        前几天我在网站后台收到留言，说附子老师发的案例不做深度分析，只做稍微的案例介绍。...
                                      </div>
                                    </div>
                                    <div class="news_info">
                                      <span class="publish_time">2020-01-02 </span>
                                      <span class="">
                                        <a class="text-reset" href="">阿松大</a>
                                      </span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </li>
                          </ul>
                        </div>
                        <!-- 侧边栏尾部 -->
                        <a href="">
                          <div class="right_more">查看更多</div>
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </main>
      <footer>footer</footer>
    </div>
  </div>
</body>

</head>